<template>
  <div class="Diedai" :style="imgStyle1">
    <nav>
      <div class="ALL">
        全部迭代 <i>(共{{ spurt.length }}个)</i>
      </div>
      <div class="oncreament" @click="oncreament">新建</div>
    </nav>
    <div class="diedaiconten">
      <el-table
        :data="
          spurt.filter(
            (data) =>
              !search || data.name.toLowerCase().includes(search.toLowerCase())
          )
        "
        width="100%"
      >
        <el-table-column
          label="迭代名称"
          prop="name"
          width="300px"
        ></el-table-column>
        <el-table-column label="状态" width="140px">
          <template slot-scope="scope">
            <span class="status1" v-if="scope.row.status === '1'">进行中</span>
            <span class="status2" v-else-if="scope.row.status === '2'"
              >已完成</span
            >
            <span class="status3" v-else-if="scope.row.status === '3'"
              >未开始</span
            >
          </template>
        </el-table-column>
        <el-table-column label="进度">
          <template slot-scope="scope">
            <el-progress
              :text-inside="true"
              :stroke-width="15"
              :percentage="Number(scope.row.progress)"
              :status="scope.row.progress == 100 ? 'success' : null"
            ></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="负责人" prop="username" width="100px">
        </el-table-column>
        <el-table-column label="开始时间" prop="startTime"> </el-table-column>
        <el-table-column label="结束时间" prop="endTime"> </el-table-column>
        <el-table-column align="right">
          <template slot="header">
            <input
              class="search"
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"
            />
          </template>
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleEdit(scope.$index, scope.row)"
              >进入</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              :disabled="scope.row.status === '2' ? true : false"
              >开始</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 添加迭代-->
    <el-dialog :visible.sync="dialogVisible" width="60%">
      <header>新建迭代</header>
      <hr />
      <f-form
        :model="formdatas"
        ref="formdatas"
        label-width="100px"
        class="demo-ruleForm"
      >
        <form-item
          label="迭代名称"
          style="width: 79%"
          :rules="[{ required: true, message: '名称不能为空' }]"
        >
          <form-input
            type="name"
            v-model="formdatas.title"
            autocomplete="off"
            name="title"
          ></form-input>
        </form-item>
        <div class="s">
          <form-item label="项目所属" class="ItemName">
            <form-input
              type="ItemName"
              v-model="projects.name"
              autocomplete="off"
            ></form-input>
          </form-item>
          <form-item
            label="负责人"
            :rules="[{ required: true, message: '负责人不能为空' }]"
          >
            <el-select
              v-model="formdatas.username"
              placeholder="请选择负责人"
              style="width: 90%"
              name="username"
            >
              <el-option
                v-for="username in formdatas.numberValidateForm1"
                :key="username.userId"
                :label="username.username"
                :value="username.username"
              ></el-option>
            </el-select>
          </form-item>
        </div>
        <div class="s">
          <form-item label="开始时间">
            <form-col>
              <form-picker
                type="date"
                placeholder="开始时间"
                v-model="formdatas.startTime"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                style="width: 100%"
                name="startTime"
              ></form-picker>
            </form-col>
          </form-item>
          <form-item label="结束时间">
            <form-col>
              <form-picker
                type="date"
                placeholder="结束时间"
                v-model="formdatas.endTime"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                style="width: 85%"
                name="endTime"
              ></form-picker>
            </form-col>
          </form-item>
        </div>
        <form-item label="迭代描述" prop="desc">
          <form-input
            type="textarea"
            rows="6"
            cols="4"
            v-model="formdatas.describe"
            name="describe"
          ></form-input>
        </form-item>
        <form-item class="submit">
          <form-button type="primary" @click="submitForm('formdatas')"
            >添加迭代</form-button
          >
        </form-item>
      </f-form>
    </el-dialog>
  </div>
</template>

<script>
import "@/assets/css/diedai.css";
import { mapState } from "vuex";
import $ from "jquery";
export default {
  data() {
    return {
      imgStyle1: {
        backgroundImage: `url(${require("@/assets/images/bgc.png")})`,
      },
      //所有迭代数据
      spurt: [],
      search: "",
      showON: false,
      //弹出框
      dialogVisible: false,
      //新建一个用户迭代 / 用户故事
      formdatas: {
        title: "",
        ItemName:
          this.$route.query.Itemname || window.localStorage.getItem("Itemname"),
        username: "",
        startTime: "",
        endTime: "",
        //迭代和用户故事负责人
        numberValidateForm1: [],
      },
      //所有用户故事
      tableData1: [],
    };
  },
  inject: ["reload1"],
  computed: { ...mapState("UserStory", ["projects"]) },
  methods: {
    compare(property) {
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
      };
    },
    projectSort() {
      this.spurt.sort(this.compare("status"));
    },
    handleEdit(index, row) {
      this.$router.push({
        name: "StoryPoint",
        query: {
          row: JSON.stringify(row),
          userStory: JSON.stringify(this.tableData1),
        },
      });
    },
    //添加迭代弹框
    oncreament() {
      this.dialogVisible = true;
    },
    /* 开启迭代 */
    handleDelete(index, row) {
      let obj = {};
      obj.name = row.name;
      obj.id = row.id;
      obj.status = "1";
      this.$http({
        url: "spurt/updateSpurt",
        method: "post",
        headers: {
          "content-type": "application/json",
        },
        data: JSON.stringify(obj),
      }).then(({ data }) => {
        if (data.flag) {
          this.$message(
            {
              message: "成功",
              type: "success",
            },
            this.sucess()
          );
          this.reload1();
        } else {
          this.$message.error("失败", this.sucess());
          this.reload1();
        }
      });
    },
    /* 添加迭代发请求 */
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //获取所有的表单中的内容
          let formdatas = $(".demo-ruleForm").serializeArray();
          let obj = {};
          obj.name = formdatas[0].value;
          obj.username = formdatas[1].value;
          obj.iterationGoal = formdatas[4].value;
          obj.startTime = formdatas[2].value;
          obj.endTime = formdatas[3].value;
          obj.projectId = this.projects.id;
          console.log(obj);
          let url = "spurt/addSpurt";
          this.oncreamentSpurt(url, obj);
        } else {
          return false;
        }
      });
    },
  },
  mounted() {
    localStorage.index = 3;
    /* 获取当前项目的所有迭代 */
    this.$http({
      method: "post",
      url: `spurt/selectAllSpurt?name=&projectId=${this.projects.id}`,
    }).then(({ data }) => {
      if (data.flag) {
        this.spurt = data.data;
        this.projectSort();
      } else {
        console.log(data.data);
      }
    });
    /* 查询所有的用户故事 */
    this.$http({
      method: "post",
      url: `userStory/selectUserStoryById?userStoryId=0`,
    }).then(({ data }) => {
      if (data.flag) {
        this.tableData1 = data.data;
      } else {
        console.log(data.data);
      }
    });
    /* 查询项目成员 */
    this.$http({
      method: "post",
      url: `project/selectUserToProject?projectId=${this.projects.id}`,
    }).then(({ data }) => {
      if (data.flag) {
        this.formdatas.numberValidateForm1 = data.data;
      } else {
        console.log(data.data);
      }
    });
  },
};
</script>
<style lang="less" scoped>
* {
  // padding: 0;
  // margin: 0;
  box-sizing: border-box;
}
::-webkit-input-placeholder {
  font-size: 14px;
}
.el-input--prefix .el-input__inner {
  padding-left: 15px;
}
.el-input--suffix .el-input__inner {
  padding-right: 59px;
}
//迭代列表
/deep/.el-input--mini .el-input__inner {
  height: 43px;
  border: 2px solid #ccc;
  line-height: 28px;
  width: 180px;
}
.el-form-item {
  margin-bottom: 10px;
  margin-left: 20px;
}
/deep/ .el-table .cell {
  box-sizing: border-box;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  line-height: 23px;
  padding-right: 26px;
}
</style>